<template>
  <div class="page">
    <go-back v-if="$route.query.isLink"></go-back>
    <div>
      <h2>接触进口冷链食品人员列表</h2>
    </div>
    <!-- 查询条件 -->
    <el-row :gutter="10" style="margin: 20px 0px">
      <el-col :span="2">
        <el-select
          size="small"
          v-model="queryParam.areaCode"
          placeholder="地区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-cascader
          :options="statusOptions"
          v-model="bodyIndustryStr"
          size="small"
          :props="{ checkStrictly: true }"
          placeholder="请选择单位业态"
          clearable
          @change="onBodyIndustryStr"
        >
        </el-cascader>
      </el-col>
      <el-col :span="2">
        <el-select
          size="small"
          v-model="queryParam.licensenumber"
          placeholder="健康码"
          clearable
        >
          <el-option
            v-for="item in [
              {
                label: '异常',
                value: 0,
              },
              {
                label: '无异常',
                value: 1,
              },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-select
          size="small"
          v-model="queryParam.entrytime"
          placeholder="行程码"
          clearable
        >
          <el-option
            v-for="item in [
              {
                label: '异常',
                value: 0,
              },
              {
                label: '无异常',
                value: 1,
              },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select
          size="small"
          v-model="queryParam.vaccination"
          placeholder="新冠疫苗接种"
          clearable
        >
          <el-option
            v-for="item in [
              { label: '已接种第三针', value: 3 },
              { label: '已接种第二针', value: 2 },
              { label: '已接种第一针', value: 1 },
              { label: '未接种', value: 0 },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select
          size="small"
          v-model="queryParam.nucleicStatus"
          placeholder="核酸采样填报"
          clearable
        >
          <el-option
            v-for="item in [
              { label: '如期填报', value: '1' },
              { label: '延期补录', value: '2' },
              { label: '延期异常', value: '0' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-select
          v-model="queryParam.personStatus"
          :clearable="false"
          size="small"
        >
          <el-option label="在岗" value="1"></el-option>
          <el-option label="离岗" value="2"></el-option>
        </el-select>
      </el-col>

          <el-col :span="2">
        <el-select
          v-model="queryParam.plLabel"
          :clearable="false"
          size="small"
        >
          <el-option label="全部" value="0"></el-option>
          <el-option label="缓化" value="1"></el-option>
          <el-option label="非缓化" value="2"></el-option>
        </el-select>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin: 20px 0px">
      <el-col :span="3">
        <el-input
          maxlength="50"
          size="small"
          v-model="queryParam.searchOne"
          placeholder="人员姓名/手机号码"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="5">
        <el-input
          maxlength="50"
          size="small"
          v-model="queryParam.searchTwo"
          placeholder="企业单位名称/统一社会信用代码"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-cascader
          clearable
          placeholder="请选择标签类别"
          size="small"
          v-model="categoryStr"
          :options="bodyindustryList"
          @change="onCascaderChange"
          :props="{
            checkStrictly: true,
          }"
        ></el-cascader>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="queryParam.tabelStatus"
          clearable
          size="small"
          placeholder="请选择单位状态"
        >
          <el-option label="接触进口冷链食品" value="0"></el-option>
          <el-option label="暂不经营进口冷链食品" value="1"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3" class="btn">
        <el-button type="primary" size="small" @click="handleQuery">
          查询
        </el-button>
        <el-button size="small" @click="handelExport" :loading="exportLoading">
          导出
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button size="small" @click="personnelBatch" type="danger"   >
          批量离岗
        </el-button>
      </el-col>
    </el-row>

    <!-- 表格数据 -->
    <el-table border stripe :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        prop="districtStreet"
        label="区域名称"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="bodyindustry"
        label="单位业态"
        align="center"
        width="200px"
      >
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.bodyindustry }}</span>
            <span v-if="scope.row.bodyindustryremarks"
              >--{{ scope.row.bodyindustryremarks }}</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="categoryOne"
        label="单位标签"
        align="center"
        width="180px"
      >
        <template slot-scope="scope">
          <span v-if="!scope.row.categoryOne">--</span>
          <span v-else-if="scope.row.categoryOne == scope.row.categoryTwo">{{
            scope.row.categoryOne
          }}</span>
          <span v-else-if="scope.row.categoryTwo">{{
            scope.row.categoryOne + "--" + scope.row.categoryTwo
          }}</span>
          <span v-else>{{ scope.row.categoryOne }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="unitName"
        label="单位名称"
        align="center"
        width="250px"
      >
      </el-table-column>
      <el-table-column
        prop="thename"
        label="姓名"
        align="center"
        width="180"
      >

       <template slot-scope="scope">
          <span v-if="scope.row.plLabel">{{scope.row.thename}}({{scope.row.plLabel}})</span>
          <span v-else>{{scope.row.thename}}</span>
        </template>


      </el-table-column>

      <el-table-column
        prop="mobile"
        label="手机号码"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="licensenumber"
        label="健康码"
        align="center"
        show-overflow-tooltip
        width="80px"
      >
        <template slot-scope="scope">
          <span :class="scope.row.licensenumber === '无异常' ? 'green' : 'red'">
            {{ scope.row.licensenumber }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="entrytime"
        label="行程码"
        align="center"
        show-overflow-tooltip
        width="80px"
      >
        <template slot-scope="scope">
          <span :class="scope.row.entrytime === '无异常' ? 'green' : 'red'">
            {{ scope.row.entrytime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="vaccination"
        label="新冠疫苗接种"
        align="center"
        show-overflow-tooltip
        width="120px"
      >
      </el-table-column>
      <el-table-column
        prop="vaccinationdate"
        label="接种日期"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
        <template slot-scope="scope">
          <span>
            {{
              scope.row.vaccinationdate === ""
                ? "--"
                : scope.row.vaccinationdate
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="nucleicStatusDate"
        label="最新核酸采样情况"
        align="center"
        show-overflow-tooltip
        width="140"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.sampleCollectTime || "--" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="最新核酸报告情况"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.result" class="green">
            {{ scope.row.result }}({{ scope.row.reportCollectTime }})
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="添加日期"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="personStatus"
        label="状态"
        align="center"
        width="150px"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.personStatus == 1" class="green">在岗</span>
          <span v-else class="red"
            >离岗({{ scope.row.dateOfResignation }})</span
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handelView(scope.row)">查看</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.personStatus == 1"
            @click="demobilized(scope.row)"
            >离岗</el-button
          >
          <el-button size="mini" type="primary" v-else  @click="resume(scope.row)">复工</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="float: right; margin: 20px 0px"
      @current-change="handleCurrentChange"
      :current-page.sync="queryParam.pageIndex"
      :page-size="queryParam.pageSize"
      background
      layout="total, prev, pager, next"
      :total="listTotal"
      v-if="listTotal > 0"
    >
    </el-pagination>

    <!-- 单个人员信息弹窗 -->
    <el-dialog
      :visible.sync="singlePersonInfoDialogVisible"
      width="93%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <single-personInfo
        ref="singlePersonInfoRef"
        :personInfo="singlePersonInfo"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="singlePersonInfoDialogVisible = false">
          关 闭
        </el-button>
      </span>
    </el-dialog>

<!-- 复工组件 -->
    <resumeWork  :dialogVisible="dialogVisible" 
      v-if="dialogVisible" :resumeData="resumeData" @oncancel="oncancel" @onsuccess="onsuccess"></resumeWork>
  </div>
</template>

<script>
import { bodyIndustryOptions, bodyIndustryLabel } from "@/utils/configure";
import SinglePersonInfo from "@/views/coldLink/personInfo/singlePersonInfo.vue";
import resumeWork from "@/views/coldLink/personInfo/resumeWork.vue";
import { groupArea } from "@/api/modules/enterprise";
import { personnelBatch } from "@/api/modules/coldLink";

export default {
  components: {
    "single-personInfo": SinglePersonInfo,
    resumeWork
  },
  data() {
    return {
      // areaOptions: [
      //   {
      //     value: "320500",
      //     label: "苏州市",
      //   },
      //   {
      //     value: "320506",
      //     label: "吴中区",
      //   },

      //   {
      //     value: "320507",
      //     label: "相城区",
      //   },
      //   {
      //     value: "320505",
      //     label: "高新区",
      //   },
      //   {
      //     value: "320508",
      //     label: "姑苏区",
      //   },
      //   {
      //     value: "320509",
      //     label: "工业园区",
      //   },
      //   {
      //     value: "320581",
      //     label: "常熟市",
      //   },
      //   {
      //     value: "320582",
      //     label: "张家港市",
      //   },
      //   {
      //     value: "320583",
      //     label: "昆山市",
      //   },
      //   {
      //     value: "320584",
      //     label: "吴江区",
      //   },
      //   {
      //     value: "320585",
      //     label: "太仓市",
      //   },
      //   {
      //     value: "320592",
      //     label: "张家港保税区",
      //   },
      // ], //地区
      areaOptions: [],
      statusOptions: bodyIndustryOptions, //业态
      // healthyQROptions: [
      //   {
      //     label: "异常",
      //     value: 0,
      //   },
      //   {
      //     label: "无异常",
      //     value: 1,
      //   },
      // ], //健康码状态
      // vaccinesOptions: [
      //   { label: "已接种第三针", value: 3 },
      //   { label: "已接种第二针", value: 2 },
      //   { label: "已接种第一针", value: 1 },
      //   { label: "未接种", value: 0 },
      // ], //疫苗接种状态
      // collectionOptions: [
      //   { label: "如期填报", value: "1" },
      //   { label: "延期补录", value: " 2" },
      //   { label: "延期异常", value: "0" },
      // ], //核酸采样状态
      queryParam: {
        areaCode: "320500", //区域编码
        bodyindustry: "", //主体业态
        licensenumber: "", //健康码 0异常 1无异常
        entrytime: "", //行程码 0异常 1无异常
        vaccination: "", //新冠疫苗接种 0未接种 1第一针 2第二针 3第三针
        nucleicStatus: "", //采样状态 0 未采样1如期采样 2延期补录 默认0
        pageIndex: 1, //开始页码
        pageSize: 20, //每页记录条数
        searchOne: "", //搜索(人员姓名/手机号码)
        searchTwo: "", //搜索(单位名称/社会信用代码)
        categoryOne: "", //
        categoryTwo: "", //
        tabelStatus: "0",
        personStatus: "1",
        plLabel:'0'
      }, //查询参数
      categoryStr: "",
      bodyIndustryStr: "",
      exportLoading: false, //导出按钮状态
      tableData: [], //表格数据
      listTotal: 0, //总条数

      singlePersonInfoDialogVisible: false, //单个人员弹窗
      singlePersonInfo: "", //单个人员信息
      bodyindustryList: bodyIndustryLabel.list,
      demobilizedList: [],
      dialogVisible:false,
      resumeData:{}
    };
  },
  created() {
    console.log(this.$route.query);
    this.categoryStr = [
      this.$route.query.categoryOne,
      this.$route.query.categoryTwo,
    ].filter((x) => x);
    this.queryParam.categoryOne = this.$route.query.categoryOne || "";
    this.queryParam.categoryTwo = this.$route.query.categoryTwo || "";
    this.queryParam.bodyindustry = this.$route.query.bodyindustry || "";
    this.queryParam.bodyindustryremarks =
      this.$route.query.bodyindustryremarks || "";
    this.queryParam.searchTwo = this.$route.query.search || "";
    this.queryParam.nucleicStatus = this.$route.query.nucleicStatus || "";

    this.queryParam.areaCode = this.$route.query.code || "320500";
    this.bodyIndustryStr = [
      this.$route.query.bodyindustry,
      this.$route.query.bodyindustryremarks,
    ].filter((x) => x);

    this.findAreaListNoParentByParentCode();

    this.getPersonList();
  },
  mounted() {},
  methods: {
    //获取区域列表
    findAreaListNoParentByParentCode() {
      groupArea({
        params: {
          areaCode: this.queryParam.areaCode,
        },
      }).then((res) => {
        // this.areaOptions = [res.data];
        console.log("获取区域列表", res.data);
        this.areaOptions.push({
          label: res.data.areaName,
          value: res.data.areaCode,
        });
        res.data.children.forEach((item1) => {
          this.areaOptions.push({
            label: item1.areaName,
            value: item1.areaCode,
          });
        });
      });
    },

    //查询
    handleQuery() {
      this.queryParam.pageIndex = 1;
      this.getPersonList();
    },

    //导出
    handelExport() {
      let params = JSON.parse(JSON.stringify(this.queryParam));
      // if (params.bodyindustry) {
      //   params.bodyindustry =
      //     // params.bodyindustry[params.bodyindustry.length - 1];
      //     params.bodyindustry[0];
      // }
      if (params.entrytime === "") {
        params.entrytime = -1;
      }
      if (params.licensenumber === "") {
        params.licensenumber = -1;
      }
      if (params.nucleicStatus === "") {
        params.nucleicStatus = -1;
      }
      if (params.vaccination === "") {
        params.vaccination = -1;
      }

      this.$http.exportPersonList(params).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          "接触进口冷链食品人员列表_" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },

    //查看
    handelView(row) {
      console.log(row);
      // let routeUrl = this.$router.resolve({
      // path: "/singlePersonInfo",
      // query: {
      //   declareId: val.declareId,
      //   reportUnitName: val.reportUnitName,
      // },
      // });
      // window.open(routeUrl.href, "_blank");

      // this.$router.push({
      //   name: "singlePersonInfo",
      //   params: {
      //     personInfo: row,
      //   },

      this.singlePersonInfo = row;
      this.singlePersonInfoDialogVisible = true;

      this.$nextTick(function () {
        //  仅在整个视图都被重新渲染之后才会运行的代码
        this.$refs.singlePersonInfoRef.getCollectionList();
      });
    },

    //分页
    handleCurrentChange(val) {
      console.log("分页", val);
      this.queryParam.pageIndex = val;
      this.getPersonList();
    },

    //获取人员列表
    getPersonList() {
      console.log("请求参数", this.queryParam);
      let params = JSON.parse(JSON.stringify(this.queryParam));
      // if (params.bodyindustry) {
      //   params.bodyindustry =
      //     // params.bodyindustry[params.bodyindustry.length - 1];
      //     params.bodyindustry[0];
      // }
      if (params.entrytime === "") {
        params.entrytime = -1;
      }
      if (params.licensenumber === "") {
        params.licensenumber = -1;
      }
      if (params.nucleicStatus === "") {
        params.nucleicStatus = -1;
      }
      if (params.vaccination === "") {
        params.vaccination = -1;
      }

      this.$http.getPersonList(params).then((res) => {
        const { code, data, msg } = res;
        if (code === 200) {
          this.tableData = data.list;
          this.listTotal = data.total;
        } else {
          this.$message.error(msg);
        }
      });
    },
    onCascaderChange(e) {
      if (e.length == 2) {
        this.queryParam.categoryOne = e[0];
        this.queryParam.categoryTwo = e[1];
      } else if (e.length == 1) {
        this.queryParam.categoryOne = e[0];
        this.queryParam.categoryTwo = "";
      } else {
        this.queryParam.categoryOne = "";
        this.queryParam.categoryTwo = "";
        this.categoryStr = "";
      }
    },
    onBodyIndustryStr(e) {
      if (e.length == 2) {
        this.queryParam.bodyindustry = e[0];
        this.queryParam.bodyindustryremarks = e[1];
      } else if (e.length == 1) {
        this.queryParam.bodyindustry = e[0];
        this.queryParam.bodyindustryremarks = "";
      } else {
        this.queryParam.bodyindustry = "";
        this.queryParam.bodyindustryremarks = "";
        this.bodyIndustryStr = "";
      }
    },
    personnelBatch() {
        if(!this.demobilizedList.length) return this.$error("请选择离岗人员")
      this.$confirm("确认离岗吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        personnelBatch({
          ids: this.demobilizedList,
          updateName: sessionStorage.getItem("logname"),
          updateDepartment: sessionStorage.getItem("unitName"),
        }).then((res) => {
          this.$success("离岗成功")
          this.queryParam.pageIndex = 1;
          this.getPersonList();
        });
      });
    },
    demobilized(e) {
      this.demobilizedList = [e.id];
      this.personnelBatch();
    },
    handleSelectionChange(e){
       this.demobilizedList =e.map(x=>x.id)
    },
    resume(e){
      this.resumeData=e
      console.log(e);
      this.dialogVisible=true
    //      this.$confirm("确认复工吗?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   }).then(() => {
    //     personnelBatch({
    //       ids: this.demobilizedList,
    //       updateName: sessionStorage.getItem("logname"),
    //       updateDepartment: sessionStorage.getItem("unitName"),
    //     }).then((res) => {
    //       this.$success("离岗成功")
    //       this.queryParam.pageIndex = 1;
    //       this.getPersonList();
    //     });
    //   });
    },
    oncancel(){
      this.dialogVisible=false
    },
    onsuccess(){
      this.getPersonList();
       this.dialogVisible=false
    }
  },
};
</script>

<style lang="less" scoped>
.page {
  padding: 10px 20px;
  .btn {
    display: flex;
    justify-content: flex-end;
  }
  /deep/.el-dialog__body {
    padding: 0px 20px;
    padding-bottom: 70px;
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
